<template>
	<view class="friend-list">
		<view class="friend-list-title">
			邀请3位好友扫码注册即可领取会员
		</view>
		<view class="friend-count">
			<view class="invited-count">
				<text class="label">已邀请</text><text class="count">{{inviteNum}}</text><text class="unit">人</text>
			</view>
			<view class="not-invited-count">
				<text class="label">还差</text><text class="count">{{discrepancyNum}}</text><text class="unit">人</text>
			</view>
		</view>
		<view class="invited-firend-list">
			<view class="invited-firend-item" v-for="item,index in 3" :key="index">
				<view class="invited-firend" v-if="friendList[index]">
					<view class="firend-avatar">
						<u-image :src="friendList[index].avatars" width="100%" height="100%" mode="aspectFill"
							border-radius="50%" />
					</view>
					<view class="firend-nickname">
						{{friendList[index].nickname}}
					</view>
				</view>
				<button class="add-btn" v-else open-type="share">
					<view class="add-icon">
						<i class="iconfont icon-add-consult icon" />
					</view>
					<view class="add-label">
						去邀请
					</view>
				</button>
			</view>
		</view>
		<button @click="receiveVIP" class="invitation-btn" :disabled="invitationBtnDisabled"
			:class="{'disabled':invitationBtnDisabled}">{{invitationBtnDisabled?isGetVip?'已领取会员':`再邀请${discrepancyNum}人即可获得VIP资格`:`已邀请${inviteNum}人，点击领取VIP`}}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				discrepancyNum: 0,
				inviteNum: 0,
				friendList: [],
				isGetVip: false,
			}
		},
		async created() {
			await this.$loginStatus;
			this.getInvitedUser();
		},
		methods: {
			async getInvitedUser() {
				const {
					data
				} = await this.$u.post(this.$restUrl.getInvitedUser);
				this.friendList = data.info;
				console.log('this.friendList>>>>>>>>>>>>>>>>>>', this.friendList);
				this.discrepancyNum = data.discrepancy_num;
				this.inviteNum = data.invite_num;
			},
			async receiveVIP() {
				await this.$u.post(this.$restUrl.receiveVIP);
				this.$showToast('领取成功');
				this.updateUserInfo();
				this.isGetVip = true;
			}
		},
		computed: {
			invitationBtnDisabled() {
				return this.friendList.length < 3 || this.isGetVip;
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./friendList.scss";
</style>
